<template>
  <div class="categories-page">
    <section class="hero">
      <h1>全部分类</h1>
      <p>按品类浏览，为你找到更合适的鞋款</p>
    </section>

    <section class="content">
      <el-skeleton v-if="loading" animated :count="8">
        <template #template>
          <div class="grid">
            <el-skeleton-item variant="image" style="height: 140px; border-radius: 12px" />
          </div>
        </template>
      </el-skeleton>

      <el-empty v-else-if="!categories.length && !error" description="暂无分类" />

      <el-alert v-else-if="error" :title="error" type="error" show-icon class="mb-16" />

      <div v-else class="grid">
        <router-link
          v-for="c in categories"
          :key="c.typeId"
          class="card"
          :to="`/category/${c.typeId}`"
        >
          <div class="card-content">
            <div class="emoji">🏷️</div>
            <h3>{{ c.typeName }}</h3>
            <p>点击查看该分类下的商品</p>
          </div>
        </router-link>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { productService } from '@/api/productService'
import type { Types } from '@/types'

const categories = ref<Types[]>([])
const loading = ref(true)
const error = ref('')

onMounted(async () => {
  try {
    // 使用启用的类型列表，更贴近前台展示
    const res = await productService.getActiveTypes()
    if (res.data?.code === 200) {
      categories.value = (res.data.data as unknown as Types[]) || []
    } else {
      categories.value = []
      error.value = res.data?.msg || '获取分类失败，请稍后重试'
    }
  } catch (e) {
    error.value = '获取分类失败，请稍后重试'
  } finally {
    loading.value = false
  }
})
</script>

<style scoped lang="scss">
.categories-page {
  .hero {
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, #f6f9ff, #eef5ff);

    h1 {
      margin: 0 0 8px 0;
      font-size: 28px;
      color: #1f2d3d;
    }
    p {
      margin: 0;
      color: #666;
    }
  }

  .content {
    max-width: 1200px;
    margin: 20px auto 40px;
    padding: 0 20px;
  }

  .mb-16 {
    margin-bottom: 16px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }

  .card {
    display: block;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eef0f4;
    text-decoration: none;
    color: inherit;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    }

    .card-content {
      padding: 20px;
      text-align: center;

      .emoji {
        font-size: 28px;
        margin-bottom: 8px;
      }
      h3 {
        margin: 8px 0 6px;
        font-size: 18px;
      }
      p {
        margin: 0;
        color: #888;
        font-size: 13px;
      }
    }
  }
}

@media (max-width: 640px) {
  .categories-page {
    .hero {
      padding: 24px 16px;
    }
  }
}
</style>
